<template>
	<view>

		<u-navbar height="60" bgColor="#0081ff">
			<!-- #ifdef MP-WEIXIN -->
			<view class="u-nav-slot margin-top-xl" slot="left">
			</view>
			<!-- #endif -->
			<view slot="center" class="u-nav-slot">
				<view style=" font-size: 20px;"> {{deviceName}}运行记录</view>
			</view>
		</u-navbar>


		<scroll-view scroll-y refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore" refresher-background="#f1f1f1" @scrolltolower="lower" enable-flex="true"
			class="page margin-top-sm">
			<view class="cu-list menu card-menu xl-border margin-top-sm" v-for="(item,index) in connectList"
				:key="index">
				<view class="cu-item">
					<view class="content flex-direction align-center">
						<view class="flex flex margin-left-sm text-xl">
							<text :class="item.status == '在线'? 'text-blue': 'text-red'">{{item.createTime}}</text>
						</view>
						<view class="flex flex margin-left-sm">
							<text class="text-grey">{{item.remark}}</text>
						</view>
					</view>
					<view class="text-blue" v-if="item.status == '在线'">{{item.status}}</view>
					<view class="text-red" v-else>{{item.status}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceId: null,
				deviceName: null,
				connectList: null,
				pageIndex: 1,
				pageSize: 20,
				totalPage: 0,
				triggered: false,
			}
		},
		onLoad(option) {
			this.deviceId = option.deviceId
			this.deviceName = option.deviceName
			this.getConnectLogList()
		},
		onShow() {
			this.getConnectLogList()
		},
		methods: {

			// 下拉刷新
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				if (!this.triggered) //界面下拉触发，triggered可能不是true，要设为true 
					this.triggered = true;
				setTimeout(() => {
					this.getConnectLogList()
					this.triggered = false; //触发onRestore，并关闭刷新图标 
					this._freshing = false;
				}, 2000)
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			lower() {
				if (this.totalPage > this.pageIndex) {
					this.pageIndex += 1,
						this.next()
				} else {
					uni.showToast({
						title: "加载完毕",
						icon: "none",
						position: 1000
					})
				}
			},
			// 下一页
			next() {
				this.$http.request({
					url: 'app/connectLog/listDeviceId',
					method: 'GET',
					data: {
						'page': this.pageIndex,
						'limit': this.pageSize,
						'deviceId': this.deviceId
					},
					success: (data) => {
						if (data.data && data.data.code == 0) {
							this.connectList = this.connectList.concat(data.data.page.list)
							this.totalPage = data.data.page.totalPage
						}
					}
				})
			},
			//获取用户的设备列表
			getConnectLogList() {
				this.pageIndex = 1;
				this.$http.request({
					url: 'app/connectLog/listDeviceId',
					method: 'GET',
					data: {
						'page': this.pageIndex,
						'limit': this.pageSize,
						'deviceId': this.deviceId
					},
					success: (data) => {
						if (data.data && data.data.code == 0) {
							this.connectList = data.data.page.list
							this.totalPage = data.data.page.totalPage
						}
					}
				})
			}
		}
	}
</script>

<style>
	.page {
		height: 700px;
		white-space: nowrap;
	}
</style>
